<template>
    <div>
        <div class="flex-img">
            <div>{{imageList}}</div>
            <div class="flex-img__item" v-for="(image,index) of imageList" :key="index">
                <div>
                    <img class="flex-img__image" :src="image">
                </div>
                <i class="el-icon-error right-up" @click.stop="handleRemove(index)"></i>
            </div>

            <el-upload
                    :action="uploadUrl"
                    :show-file-list="false"
                    accept="image/*"
                    list-type="picture-card"
                    :limit="5"
                    :file-list="fileList"
                    :on-preview="handlePictureCardPreview"
                    :on-success="handleSuccess"
                    :before-upload="beforeUpload"
                    v-show="hideShow">
                <i class="el-icon-plus"></i>
            </el-upload>
        </div>

        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过1M</div>

        <el-dialog :visible.sync="dialogVisible" size="tiny">
            <img width="100%" :src="dialogImageUrl">
        </el-dialog>
    </div>
</template>

<script>
    export default {
        props: {
            imageList: Array,
            clearList: Number
        },
        data() {
            return {
                uploadUrl: 'http://dspt.zkong.me/api/upload_admin',
                dialogImageUrl: '',
                dialogVisible: false,
                fileList:  this.imageList ? this.imageList : [],
                hideShow:true
            };
        },
        watch: {
            imageList(value) {
                // if (!value) {
                //     this.fileList = [];
                // }
                    this.fileList = value;
            },
            clearList() {
                this.fileList = [];
            },
            fileList(value) {
                console.log('文件列表',value)
                const list = value.map(item => item.url);
                console.log('文件列表值',list)
                this.$emit('update:imageList', list);
            }
        },
        created(){
            console.log('父组件数据',this.imageList)
        },
        methods: {
            handleRemove(index) {
                console.log('移除图片',index)
                this.fileList.splice(index, 1);
            },
            handleSuccess(response, file, fileList) {
                console.log('图片上传成功',fileList)
                console.log('图片上传成功链接',file.url)

                this.fileList = fileList;

            },
            beforeUpload(file){
                const imageSize = file.size / 1024 / 1024 < 1;
                if(!imageSize){
                    this.$message.error('上传封面大小不能超过 1MB!');
                }
                return imageSize;
            },
            handlePictureCardPreview(file) {
                console.log('图片文件',file);
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            }
        }
    };
</script>

<style scoped>
    .flex-img
    {
        display: flex;
    }
    .flex-img__item
    {
        position: relative;

        box-sizing: border-box;
        width: 148px;
        height: 148px;
        margin: 0 8px 8px 0;

        border: 1px solid #c0ccda;
        border-radius: 6px;
        background-color: #fff;
    }
    .right-up
    {
        position: absolute;
        z-index: 1024;
        top: -5px;
        right: -5px;
    }
    .flex-img__image
    {
        width: 146px;
        height: 146px;

        border-radius: 6px;
    }

</style>


<style>
    .el-upload-list__item.is-success .el-upload-list__item-status-label
    {
        display: none;
    }

</style>
